<template>
  <!-- 头部 -->
  <div class="publish-header">
    <span @click="cancelPublic">取消</span>
    <span>发帖</span>
    <span @click="toPub">发表</span>
  </div>
  <!-- 文本框 -->
  <div class="publish-middle">
    <textarea
      v-model.trim="info.dynamic"
      placeholder="请输入内容..."
    />
  </div>
  <!-- 参与话题 -->
  <span class="publish-footer">#参与话题</span>
</template>

<script setup name="Publish">
import { useRouter } from 'vue-router'
import * as dayjs from 'dayjs'
import { publishInfo } from '@/api/public'
import { reactive } from 'vue'
import { getItem } from '@/utils/token'

// 声明函数，方便调用
const getData = dayjs().format('YYYY-MM-DD')
const router = useRouter()

// 声明对象
const info = reactive({
  forward: 0,
  comment: 0,
  fabulous: 0,
  name: getItem('TOKEN').name,
  userImg: getItem('TOKEN').userImg,
  time: getData,
  dynamic: null
})

// 点击取消返回动态页面
const cancelPublic = () => {
  router.push('/community')
}

// 用户数据返回服务器
const toPub = async () => {
  if (info.dynamic === '') return
  const result = await publishInfo(info)
  if (result) {
    router.push('/community')
  }
}
</script>

<style lang="less" scoped>
.publish-header{
    width: 100%;
    height: 35px;
    padding: 0px 15px;
    display: flex;
    color: gray;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    box-shadow: 3px 3px 20px #ccc;
    font-size: 15px;
    span{
        &:nth-child(1){
            color: #333;
        }
        &:nth-child(2){
            font-weight: 600;
            font-size: 16px;
            color: #000;
        }
    }
}
.publish-middle{
    width: 100%;
    height: 180px;
    border-bottom: 1px solid gray;
    textarea{
        padding: 15px 20px;
        color: #000;
        resize:none;
        border: none;
        font-weight: 500;
        font-size: 15px;
        width: 100%;
        height: 80px;
        outline: none;
    }
}
.publish-footer{
    margin-left: 20px;
    font-size: 15px;
    line-height: 40px;
    color: #00f;
}
</style>
